<template>
    <div style="padding-top:20px">
        <div style="text-align:center;margin:0px auto">{{ businessName }}</div>
        <div class="L-optionBox">

            <van-uploader v-model="filelist" :after-read="handleUpload" accept="*" multiple :before-delete="handleDelete">
                <div class="upload-block">
                    <i class="el-icon-upload" style="color:#C0C4CC;font-size: 40px;"></i>
                    <div style="margin-top: 10px;color:#409EFF;font-size: 14px;">点击上传协议</div>
                </div>
            </van-uploader>
        </div>


        <van-tabbar safe-area-inset-bottom>

            <van-tabbar-item @click="handleBusinessCancle">取消</van-tabbar-item>

            <van-tabbar-item @click="handleSubmit">提交</van-tabbar-item>

        </van-tabbar>

    </div>
</template>
<script>
import qs from 'qs'
import Vue from 'vue';
import { Toast, Uploader } from 'vant';
Vue.use(Uploader);
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {
        handleBusinesSubmit: {
            type: Function,
            default: () => { }
        },
        handleBusinessCancle: {
            type: Function,
            default: () => { }
        },
        businessName: {
            type: String,
            default: ""
        },
        idobject: {
            type: String,
            default: ""
        },
        headObjectId: {
            type: String,
            default: ""
        },
        headObject: {
            type: String,
            default: ""
        },

    },
    data() {
        return {
            filelist: [],
            files: []
        }
    },
    computed: {

    },
    watch: {
        // filelist: {
        //     handler(newval, oldval) {
        //         console.log("oldval",oldval)
        //         console.log("newval",newval)
        //         // return 
        //         if (newval.length < oldval.length) {
        //             this.files = this.files.filter((item, index) => {
        //                 let res = false
        //                 newval.forEach(vitem => {
        //                     if (vitem.file.name === item.olaname) {
        //                         res = true
        //                     }
        //                 })

        //                 return res
        //             })
        //             console.log("this.files &&&",this.files)

        //         }


        //     }
        // }

    },
    mounted() {

    },
    methods: {
        handleDelete(delitem){
       

            this.files = this.files.filter(item=>{
                
                return item.oldname !== delitem.file.name
            })
        
            return true

        },
        handleSubmit() {

            if (this.files.length === 0) {
                Toast("请选择协议!")
                return
            }
            const fpuploadnewname = this.files.reduce((pre, item) => {
                return `${pre}${item.newname};`
            }, '')


            let data = {
                fpuploadnewname: fpuploadnewname,
                [`${this.idobject}_${this.headObject}code`]: this.headObjectId

            }
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration: 0
            });

            this.axios({
                method: 'post',
                url: '/api/' + this.idobject + '.scxysave.do',
                data: qs.stringify(data)
            }).then(res => {
                this.isDisable = false
                if (res.data.flag === '1') {
                    Toast(res.data.des)
                    if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
                        this.loginout()
                    }
                } else {
                    let des = res.data.des
                    if (des.slice(-4) === "添加成功") {
                        Toast(des.slice(-4))
                        setTimeout(() => {
                            this.handleBusinesSubmit()
                        }, 1000)

                    } else {
                        Toast(des)
                    }




                }
            }).catch(res => {

            }).finally(() => {
                Toast.clear()
            })

        },
        handleUpload(file, detail) {

            // 上传
            let deviceFile = []
            let formData = new FormData()
            if (Array.isArray(file)) {
                deviceFile = file
            } else {
                deviceFile.push(file)
            }
            for (let i = 0; i < deviceFile.length; i++) {
                formData.append('file' + i, deviceFile[i].file, deviceFile[i].name)
            }


            this.axios({
                method: 'post',
                url: '/api/upload.filedo',
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(res => {

                if (res.data.flag == '0') {

                    let fileInfo = res.data.fileInfo

                    const newnameList = fileInfo[0].newname.split(';')
                    const oldnameList = fileInfo[0].oldname.split(';')
                    const files = newnameList.map((item, index) => {
                        const file = { newname: item, oldname: oldnameList[index] }
                        return file
                    })

                    this.files = [...this.files, ...files]
                    console.log("this.files", this.files)

                    Toast('上传成功')
                } else {
                    Toast('上传失败')
                }
            }).catch(res => {
                //console.log(res)
            })
            // let headdata = this.jsondata.head[0].groupvalue
            //console.log(file)
            //console.log(detail)
        },

    }
};
</script>
<style scoped>
.L-optionBox {
    /* box-sizing: border-box; */
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.L-optionBox .L-upload-btn {
    width: 95vw;
    margin: 10px auto;
}


.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

.upload-demo {
    width: 100%;
    height: 250px;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.L-upload-btn {
    width: 95vw;
    margin: 10px auto;
}

.upload-block {
    width: 95vw;
    height: 160px;
    border: 1px #ccc dashed;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    background-color: #f4f4f4;
}
</style>